import { getToken, setToken, removeToken, setTimeStamp } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'
// 状态
const state = {
  // 设置token来共享状态/初始状态 初始化vuex的时候 就先从缓存中读取 实现Vuex的持久化
  token: getToken(),
  userInfo: {} // 定义一个空的对象 不是null 因为后边我要开放userInfo的属性给别人用  userInfo.name
}
// 修改状态
const mutations = {
  // 设置token
  setToken(state, token) {
    state.token = token // 设置token  只是修改state的数据
    // 同步给缓存 vuex和 缓存数据的同步
    setToken(token)
  },
  // 删除token
  removeToken(state) {
    // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
    state.token = null // 删除vuex的token
    // 直接调用方法清空本地缓存
    removeToken()
  },
  // 更新一个对象 设置用户信息
  setUserInfo(state, result) {
    state.userInfo = result // 这是响应式
    // state.userInfo = {...result} // 用 浅拷贝的方式去赋值对象 因为这样数据更新之后，才会触发组件的更新
    // state。userInfo['username] = result // 这样才不是响应式
  },
  // 删除用户信息
  removeUserInfo(state) {
    state.userInfo = {}
  }
}
// 执行异步
const actions = {
  // 定义login action  也需要参数 调用action时 传递过来的参数
  async login(context, data) {
    // 调用api的接口
    const result = await login(data) // 拿到token
    // axios默认给数据加了一层data
    // if (result.data.success) {
    //   // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
    //   // 现在有用户token
    //   // actions 修改state 必须通过mutations
    //   context.commit('setToken', result.data.data)
    // }
    // 因为在响应拦截器那处理了 所以只需要写下面一行代码
    context.commit('setToken', result) // 设置token
    // 将当前的最新时间写入缓存
    setTimeStamp()
  },
  // 获取用户资料action
  async getUserInfo(context) {
    const result = await getUserInfo() // 获取返回值
    const baseInfo = await getUserDetailById(result.userId) // 为了获取头像
    const baseResult = { ...result, ...baseInfo } // 将两个接口结果合并
    context.commit('setUserInfo', baseResult) // 此时已经获取到了用户的基本资料 迫不得已 为了头像再次调用一个接口
    return baseResult // 这里为什么要返回 为后面埋下伏笔
  },
  logout(context) {
    // 删除token
    context.commit('removeToken')
    // 删除用户资料
    context.commit('removeUserInfo')
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
